<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性的基本用法</title>
</head>

<body>
    <script src="js/vue.js"></script>
    <div id="app">
        <p>总成绩：{{totalScore}}</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                scores:[
                    {
                        id:01,
                        name:"语文",
                        score:95
                    },{
                        id:02,
                        name:"数学",
                        score:120

                    },{
                        id:03,
                        name:"英语",
                        score:118

                    },{
                        id:04,
                        name:"物理",
                        score:97

                    },{
                        id:05,
                        name:"化学",
                        score:98

                    }
                ]
            },
            computed:{
                totalScore(){
                    let sum = 0;
                    for (const subject of this.score) {
                       sum += subject.score
                    }
                    return sum
                }
            }
        })
    </script>

</body>

</html>